<!--
 * @Author: ITDLCL
 * @Date: 2024-11-16 17:24:24
 * @LastEditors: ITDLCL
 * @Description:
-->
<template>
  <view class="footer">
    <view class="footer_groups">
      <view
        class="footer_groups_bar d-flex"
        v-for="(item, index) in list"
        :key="index"
        :class="{ 'show-line': index != 0 }"
        @click="openPage(index)"
      >
        <view class="arrow">
          <image
            v-if="tabIndex == index"
            src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/arrow.png"
            mode="widthFix"
          ></image>
        </view>
        <text class="zh-name siyuan-medium">{{ item.name }}</text>
        <text class="es-name intel-one-mono-regular">{{ item.es_name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, watch } from "vue";
import { useStore } from "vuex";
import { ref } from "vue";

let props = defineProps({
  tabIndex: {
    type: Number,
    default: 0,
  },
});

const store = useStore();
const list = [
  {
    name: "首页",
    es_name: "Home",
  },
  {
    name: "会员码",
    es_name: "Membership",
  },
  {
    name: "我",
    es_name: "Me",
  },
];
// const tabIndex = ref(0);
// watch(store.state.navigatorName, val => {
//   compareRouter();
// });
// 页面跳转
const openPage = index => {
  let url =
    index == 1
      ? "/pages/member/index"
      : index == 2
      ? "/pages/personal/index"
      : "/pages/index/index";

  uni.switchTab({
    url: url,
  });
};

// // 校验tab
// const compareRouter = () => {
//   let name = store.state.navigatorName;
//   console.log(name);
//   if (name.indexOf("/member/") > -1) {
//     tabIndex.value = 1;
//   } else if (name.indexOf("/personal/") > -1) {
//     tabIndex.value = 2;
//   } else {
//     tabIndex.value = 0;
//   }
// };
// onMounted(() => {
//   compareRouter();
// });
</script>

<style lang="scss" scoped>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  padding: 0 20rpx 46rpx;
  &_groups {
    &_bar {
      align-items: center;
      .arrow {
        width: 102rpx;
        image {
          width: 26rpx;
		  height: 26rpx;
          margin-left: 34rpx;
        }
      }
      .zh-name {
        margin-right: 54rpx;
        font-size: 42rpx;
        line-height: 66rpx;
      }
      .es-name {
        font-size: 46rpx;
      }
    }
    &_bar.show-line {
      align-items: center;
      border-top: 2rpx solid #000000;
      .zh-name {
        margin-right: 48rpx;
      }
    }
  }
}
</style>
